<!--
 * @Author: dxzheng
 * @Date: 2020-07-05 17:05:54
 * @LastEditTime: 2020-07-10 19:46:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bootstrap-timer-tracking-project\index.html
-->

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">

    <title>Hello, world!</title>
</head>

<body>

    <header class="position-fixed">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="#">
                    <img src="./images/sign.png" alt="" width="140px">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
                    aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarText">
                    <ul class="navbar-nav mr-auto text-center">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./html/pricing.html">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./html/integration.html">Integrations</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Remote work</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Book a Demo</a>
                        </li>
                        <li class="nav-item d-block d-lg-none">
                            <a class="nav-link" href="./html/register.html">Sign Up for Free</a>
                        </li>
                        <li class="nav-item d-block d-lg-none">
                            <a class="nav-link" href="./html/login.html">Log in</a>
                        </li>
                    </ul>
                    <form class="form-inline d-none d-lg-block">
                        <a href="./html/register.html"><button class="btn btn-outline-success btn-signUp mr-2"
                                type="button">Sign Up for
                                Free</button></a>
                        <a href="./html/login.html"><button class="btn btn-outline-success btn-logIn" type="button">Log
                                in</button></a>
                    </form>
                </div>
            </nav>

        </div>
    </header>
    <section id="con-time-tracking">
        <div class="container">
            <div class="row top">
                <div class="col wow animate__animated animate__bounceInLeft">
                    <h3 class="title">Time tracking software that improves the profitability of your
                        projects</h3>
                    <p class="explain font-weight-lighter">You can’t improve what you don’t measure. You need
                        indisputable data on your
                        project performance. Timecamp gives you them.</p>
                    <form>
                        <div class="row email-wrap align-items-center">
                            <span class="iconfont icon-youxiang col-1"></span>
                            <input type="text" placeholder="Your e-mail address" class="col-6 border-0">
                            <p class="col-5 col-md-4 col-lg-5 try-free text-center font-weight-bold">TRY FOR FREE</p>
                        </div>
                        <input class="form-check-input ml-1" type="checkbox" value="" id="defaultCheck1">
                        <p class="ml-4"><small>By signing up you agree to our <a href="#">Terms and Conditions</a> and
                                <a href="#"> Privacy Policy</a>.</small></p>
                    </form>
                </div>
                <div class="col d-none d-md-block">
                    <img src="./images/top-right.png" alt="" width="400px" class="mt-5">
                </div>
            </div>
            <div class="row bottom md-0 mb-md-5">
                <div class="col-lg-2 col-md-12 text text-center">
                    <p> Trusted by 10,000 teams</p>
                </div>
                <div class="col-lg-1 d-none d-lg-block"></div>
                <div class="col-lg-1 col-2">
                    <img src="./images/usp.png" alt="">
                </div>
                <div class="col-lg-1 col-2">
                    <img src="./images/oklahoma.png" alt="">
                </div>
                <div class="col-lg-1 col-2">
                    <img src="./images/dsv.png" alt="">
                </div>
                <div class="col-lg-1 col-2">
                    <img src="./images/parker.png" alt="">
                </div>
                <div class="col-lg-1 col-2">
                    <img src="./images/logo.png" alt="">
                </div>
                <div class="col-lg-1 col-2">
                    <img src="./images/blitzmetrics.png" alt="">
                </div>
                <div class="col-lg-1 d-none d-lg-block"></div>
                <div class="col-lg-2 col-12 pic-cap">
                    <img src="./images/capterra_reviews.png" alt="">
                </div>
            </div>
        </div>
    </section>
    <section id="con-withCamp">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-sm-0"></div>
                <div class="col-md-6 col-sm-12  wow animate__animated animate__bounceInRight">
                    <h3 class="font-weight-normal">With TimeCamp, remote work will get done</h3>
                    <p class="font-weight-lighter">Now you can bring in more clarity to how your remote team works.
                        Regardless of their location and
                        time zone. No more
                        guesswork on trying to figure out what everyone’s currently working on. Use the proper remote
                        work app for your home
                        office.</p>
                    <button type="button" class="btn btn-success readMore">Read more</button>
                    <button type="button" class="btn btn-outline-success signUp">Sign up for demo</button>
                </div>
            </div>
        </div>
    </section>
    <section id="con-ranked">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-sm-12 wow animate__animated animate__bounceInLeft left">
                    <h3>Ranked as a Spring Leader by Customer Reviews</h3>
                    <p class="font-weight-lighter">For us, success is measured by how much TimeCamp is valued by our
                        customers.</p>
                    <p class="font-weight-lighter">TimeCamp has been awarded “Easiest To Use 2020 Spring Leader” in the
                        “Time Tracking” category by
                        G2Crowd, the leading B2B software review website.</p>
                </div>
                <div class="col-md-6 col-sm-12">
                    <img src="./images/leader.jpg" alt="" width="100%">
                    <a href="#">TimeCamp is a leader in Project Cost Management on G2</a>
                </div>
            </div>
        </div>
    </section>
    <section id="con-use">
        <div class="container">
            <div class="row">
                <div class="col-md-6 d-none d-md-block person wow animate__animated animate__bounceIn">
                    <img src="./images/timecamp-asana-integration.png" alt="" class="img1">
                    <img src="./images/timecamp-jira-integration.png" alt="" class="img2">
                    <img src="./images/timecamp-podio-integration.png" alt="" class="img3">
                    <img src="./images/timecamp-slack-integration.png" alt="" class="img4">
                    <img src="./images/timecamp-trello-integration.png" alt="" class="img5">
                </div>
                <div class="col-md-6 col-sm-12 text wow animate__animated animate__bounceInRight">
                    <h3 class="text-md-right text-center">Use our integrations to track time in your task management
                        software</h3>
                    <p class="text-md-right text-center mt-5 mb-5 font-weight-lighter">Seamless time tracking in project
                        management,
                        accounting, team
                        collaboration and other tools without creating entries
                        manually. Trello, Asana, Podio and more...</p>
                    <div class="text-md-right text-center">
                        <a href="#" class="d-inline-block text-decoration-none">Check all 114 integrations</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="con-time-software">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-12 text-center  text">
                    <h3 class=" font-weight-bold">Time tracking software that your team will actually use</h3>
                    <p>Over 10 000 teams use TimeCamp each day and over 280 000 users trusted in our tool!</p>
                    <a href="#">Join them now!</a>
                    <div
                        class="card img-card  d-none d-sm-none d-md-block wow animate__animated animate__fadeInDownBig">
                        <div class="card-body">
                            <h5 class="card-title font-weight-light">Clients</h5>
                            <p class="card-text font-weight-bold">More than 500 million hours recorded by our clients.
                            </p>
                            <div class="row client"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 card-left">
                    <!-- <div class="card txt-card">
                        <div class="card-body new">
                            <h5 class="card-title font-weight-bold">LOCATION TRACKING VIA GPS</h5>
                            <p class="card-text">Do you manage and off-site team and want to know who went where? Our GPS tracker is here!</p>
                        </div>
                    </div> -->
                </div>
                <div class="col-md-4 card-right"></div>
            </div>
        </div>
    </section>
    <section id="con-great-tool" class="container">
        <div class="row">
            <div class="col-md-6 mt-sm-4 mt-md-0 mt-4 order-md-0 order-sm-1 order-1">
                <img src="./images/screen-latest-1.png" alt="" title="Time tracking software for team" width="100%">
            </div>
            <div class="col-md-6 order-md-1 order-sm-0 order-0  wow animate__animated animate__bounceInRight">
                <h5 class="text-center text-md-right">Great tool for time tracking</h5>
                <div class="media p-2 mt-4 mb-4 rounded d-flex align-items-center ml-auto">
                    <div class="media-body">
                        <h5 class="mt-0 mb-1 text-center">Sandra L. Todic</h5>
                        <p class="font-weight-bold text-center">ADVANCED MARKETING STRATEGIES</p>
                    </div>
                    <img src="./images/user-7.png" class="ml-3" alt="...">
                </div>
                <p class="text-md-right text-sm-center ">I needed to track time for freelance work on managing Facebook
                    campaigns and
                    creative. Easy setup, reporting, and great
                    support. It integrates with Trello, which is a big plus. It does everything I need, for free. I
                    really like the budget
                    tracking notifications.</p>
            </div>
        </div>
    </section>
    <section id="con-you-cannot" class="container">
        <div class="row">
            <div class="col-md-6 wow animate__animated animate__bounceInLeft">
                <h5 class="text-center text-md-left">You cannot improve what you don’t measure</h5>
                <div class="media p-2 mt-4 mb-4 rounded d-flex align-items-center mr-auto">
                    <img src="./images/user-8.png" class="mr-3 img-fluid" alt="...">
                    <div class="media-body">
                        <h5 class="mt-0 mb-1 text-center">Krishnan Pazhayanoor</h5>
                        <p class="font-weight-bold text-center">TOTALOGISTIX, INC.</p>
                    </div>

                </div>
                <p class="text-md-left text-sm-center">This is one of the best tools in the marketplace for measuring
                    activities and productivity. This is a must have
                    software, for every contributor, not just for managers. It does a great job categorizing websites
                    out of the gate.
                    Clearly, they are not aware of intranet/custom sites, so you will have to customize that but it is
                    very easy to do so.
                    Incredible tool. I have personally benefited from using it to review my own time.</p>
            </div>
            <div class="col-md-6">
                <img src="./images/screen-latest-2.png" alt="" title="Time tracking software for team" width="100%"
                    class=" mt-sm-4 mt-md-0 mt-4">
            </div>
        </div>
    </section>
    <section id="con-know-your">
        <div>
            <h5 class=" font-weight-bold">Know where your time goes</h5>
            <p class="mt-5 mb-5 font-weight-light">Try TimeCamp with your team for free and enjoy easy to use
                timesheets.</p>
            <a href="#">Sign up for free</a>
        </div>
    </section>
    <section id="con-I-finally" class="container">
        <div class="row">
            <div class="col-md-6 mt-sm-4 mt-md-0 mt-4 order-md-0 order-sm-1 order-1">
                <img src="./images/screen-latest-3.png" alt="" title="Time tracking software for team" width="100%">
            </div>
            <div class="col-md-6 order-md-1 order-sm-0 order-0 wow animate__animated animate__bounceInRight">
                <h5 class="text-center text-md-right">I finally found an app that works</h5>
                <div class="media p-2 mt-4 mb-4 rounded d-flex align-items-center ml-auto">
                    <div class="media-body">
                        <h5 class="mt-0 mb-1 text-center">Gedas Barodica</h5>
                        <p class="font-weight-bold text-center">RICHARDSON AND STARLING</p>
                    </div>
                    <img src="./images/user-9.png" class="ml-3" alt="...">
                </div>
                <p class="text-md-right text-sm-center ">It's a great time tracking application! I love weekly and
                    monthly time reports. Amazing visualisation on a mobile
                    device. Very handy and easy to observe the data and make useful conclusions.</p>
            </div>
        </div>
    </section>
    <section id="con-the-proof" class="container">
        <h5 class="font-weight-bold">The proof is in the numbers<br>
            and successful customers</h5>
        <div class="row">
            <!-- <div class="col-lg-2 col-md-6 col-6">
                <p class="wrap rounded-pill">
                    <img src="./images/ic" alt="">
                </p>
                <span class="number font-weight-bold">10</span><br>
                <span class="txt font-weight-lighter">years on the market</span>
            </div> -->
        </div>

    </section>
    <section id="rewards" class="container">
        <h5>Rewards</h5>
        <p class="font-weight-light">Each year we are rewarded in the most exclusive competitons.</p>
        <div class="row">
            <div class="col-0 col-md-1" wow animate__animated animate__zoomIn></div>
            <div class="col wow animate__animated animate__zoomIn">
                <img src="./images/rewards01.png" alt="">
            </div>
            <div class="col wow animate__animated animate__zoomIn">
                <img src="./images/rewards02.png" alt="">
            </div>
            <div class="col wow animate__animated animate__zoomIn">
                <img src="./images/rewards03.webp" alt="">
            </div>
            <div class="col wow animate__animated animate__zoomIn">
                <img src="./images/rewards04.svg" alt="">
            </div>
            <div class="col wow animate__animated animate__zoomIn">
                <img src="./images/rewards05.png" alt="">
            </div>
            <div class="col-0 col-md-1" wow animate__animated animate__zoomIn></div>
        </div>
    </section>
    <section id="con-all-of" class="container">
        <div class="row">
            <div class="col-md-7 col-12 wow animate__animated animate__bounceInLeft left">
                <h5>All of that in one compact system that offers the web, desktop and mobile application</h5>
                <p class="mt-5 mb-5">Try out TimeCamp for one month free with no credit card credentials required, nor
                    any additional
                    information.</p>
                <form class="form-inline">
                    <input type="email" class="form-control mb-2 p-2 pl-4 d-flex" id="exampleFormControlInput1"
                        placeholder="Your e-mail address">
                    <button type="submit" class="btn mb-2">Try for free</button>
                </form>
            </div>
            <div class="col-md-5 d-none d-md-block">
                <img src="./images/right-bottom-2.png" alt="" width="100%" class="mt-5">
            </div>
        </div>
    </section>
    <footer>
        <div class="skew-bg"></div>
        <div class="bg pb-4">
            <div class="container">
                <div class="row top">
                </div>
                <i class="d-block mt-3 mb-5"></i>
                <ul class="row list-unstyled middle">
                    <li class="col-sm-3 col-12 text-center text-sm-left">
                        <a href="#">Terms</a>
                    </li>
                    <li class="col-sm-3 col-12 text-center text-sm-left">
                        <a href="#">Privacy</a>
                    </li>
                    <li class="col-sm-3 col-12 text-center text-sm-left">
                        <a href="#">Security</a>
                    </li>
                </ul>
                <ol class="list-unstyled row bottom">
                    <li class="col-sm-3 col-12 text-center text-sm-left">TimeCamp. Inc. 340 S Lemon Ave #4967, Walnut CA
                        91789
                        We use cookies.
                        <a href="#" class="font-weight-bold">Click here for more</a>
                    </li>
                    <li class="col-sm-3 col-12 text-center text-sm-left">United States, support@timecamp.com</li>
                    <li class="col-sm-3 col-12 text-center text-sm-left">Copyright © 2020 TimeCamp. Inc.</li>
                    <li class="col-sm-3 col-12 text-center text-sm-right">
                        <div class="dropup">
                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="iconfont icon-diqiu"></span>
                                English
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                                <button class="dropdown-item" type="button">German</button>
                                <button class="dropdown-item" type="button">French</button>
                                <button class="dropdown-item" type="button">Polish</button>
                                <button class="dropdown-item" type="button">Spanish</button>
                                <button class="dropdown-item" type="button">Portugese</button>
                                <button class="dropdown-item" type="button">Russian</button>
                                <button class="dropdown-item" type="button">Italiano</button>
                                <button class="dropdown-item" type="button">Chinese</button>
                                <button class="dropdown-item" type="button">Arabic</button>
                            </div>
                        </div>
                    </li>
                </ol>
            </div>

        </div>
        <div class="server position-fixed rounded-circle shadow-lg rounded">
            <p>
                <span class="rounded-circle circle1"></span>
                <span class="rounded-circle circle2"></span>
                <span class="rounded-circle circle3"></span>
            </p>
        </div>
        <div class="dialog position-fixed shadow-lg">
            <div class="header pt-2 pl-2 pr-2">
                <p class="d-flex justify-content-between align-items-center top">
                    <span class="left" data-toggle="tooltip" data-placement="bottom" title="Options">
                        <i></i>
                        <i></i>
                        <i></i>
                    </span>
                    <span class="font-weight-bold">Now chatting</span>
                    <span class="closes" id="closes" data-toggle="tooltip" data-placement="bottom"
                        title="Minimize window">
                        <i></i>
                    </span>
                </p>
                <div class="bot d-flex align-content-center justify-content-between">
                    <div class="media">
                        <img src="./images/server.jfif" class="mr-2 rounded-circle" alt="..." width="20%">
                        <div class="media-body">
                            <p class="mb-0 font-weight-bold">Sammy Brand</p>
                            Support Agent
                        </div>
                    </div>
                    <p class="d-inline-block">
                        <span class="iconfont icon-zan" data-toggle="tooltip" data-placement="bottom"
                            title="Rate as good"></span>
                        <span class="iconfont icon-buzan zan" data-toggle="tooltip" data-placement="bottom"
                            title="Rate as bad"></span>
                    </p>
                </div>
            </div>
            <ul class="middle-con p-2">
                <li class="media">
                    <p class="head"></p>
                    <div class="media-body">
                        <span class="mt-0">Sammy Brand</span>
                        <span>19:55</span>
                        <p class="bg-white">Hi - can I answer any questions for you?</p>
                    </div>
                </li>
                <!-- <li class="you text-right">
                                    <p class="tip mb-0">You
                                        <span class="d-inline-block">21:33</span>
                                    </p>
                                    <p class="mb-0 content">hello</p>
                                    <span class="active d-block">Read</span>
                                </li> -->
            </ul>
            <div class="bottom pl-3 pr-3">
                <input type="text" id="send-msg" class="border-0" placeholder="Write a message">
                <svg class="icon" id="send" aria-hidden="true">
                    <use xlink:href="#icon-fasong-mian-"></use>
                </svg>
            </div>
        </div>
    </footer>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./bootstrap/js/bootstrap.js"></script>
    <script src="./js/wow.js"></script>
    <script src="./js/iconfont.js"></script>
    <script src="./js/myJs/index.js"></script>
</body>

</html>